<template>
  <view class="index-container">
    <view class="header">
      <text class="title">跨端Vue框架</text>
      <text class="subtitle">一套代码，多端运行</text>
    </view>
    
    <view class="content">
      <view class="welcome-card">
        <text class="welcome-text">Hello 跨端</text>
        <text class="description">
          欢迎使用跨端Vue统一开发框架！
          支持iOS、Android、鸿蒙Next、Web、各种小程序、快应用等平台
        </text>
      </view>
      
      <view class="feature-list">
        <view class="feature-item" v-for="(feature, index) in features" :key="index">
          <text class="feature-icon">{{ feature.icon }}</text>
          <text class="feature-text">{{ feature.text }}</text>
        </view>
      </view>
      
      <view class="theme-toggle">
        <button class="theme-btn" @tap="toggleTheme">
          {{ isDark ? '☀️ 浅色模式' : '🌙 深色模式' }}
        </button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      features: [
        { icon: '📱', text: 'iOS & Android' },
        { icon: '🌐', text: 'Web响应式' },
        { icon: '🔮', text: '鸿蒙Next' },
        { icon: '💬', text: '微信小程序' },
        { icon: '💰', text: '支付宝小程序' },
        { icon: '🔍', text: '百度小程序' },
        { icon: '🎵', text: '抖音小程序' },
        { icon: '✈️', text: '飞书小程序' },
        { icon: '🐧', text: 'QQ小程序' },
        { icon: '🦘', text: '快手小程序' },
        { icon: '🔔', text: '钉钉小程序' },
        { icon: '🛒', text: '淘宝小程序' },
        { icon: '🐶', text: '京东小程序' },
        { icon: '📕', text: '小红书小程序' },
        { icon: '⚡', text: '快应用' },
        { icon: '🎯', text: '鸿蒙元服务' }
      ],
      isDark: false
    }
  },
  onLoad() {
    // 获取当前主题
    this.isDark = uni.getStorageSync('theme') === 'dark'
  },
  methods: {
    toggleTheme() {
      this.isDark = !this.isDark
      const theme = this.isDark ? 'dark' : 'light'
      uni.setStorageSync('theme', theme)
      
      // 通知全局主题变更
      uni.$emit('themeChange', theme)
      
      // 应用主题样式
      if (this.isDark) {
        document.documentElement.classList.add('dark-theme')
      } else {
        document.documentElement.classList.remove('dark-theme')
      }
      
      uni.showToast({
        title: `已切换到${this.isDark ? '深色' : '浅色'}模式`,
        icon: 'none'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.index-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 40rpx;
}

.header {
  text-align: center;
  margin-bottom: 60rpx;
  
  .title {
    display: block;
    font-size: 48rpx;
    font-weight: bold;
    color: #fff;
    margin-bottom: 10rpx;
  }
  
  .subtitle {
    display: block;
    font-size: 28rpx;
    color: rgba(255, 255, 255, 0.8);
  }
}

.content {
  .welcome-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10rpx);
    border-radius: 20rpx;
    padding: 40rpx;
    margin-bottom: 40rpx;
    border: 1rpx solid rgba(255, 255, 255, 0.2);
    
    .welcome-text {
      display: block;
      font-size: 36rpx;
      font-weight: bold;
      color: #fff;
      margin-bottom: 20rpx;
      text-align: center;
    }
    
    .description {
      display: block;
      font-size: 24rpx;
      color: rgba(255, 255, 255, 0.9);
      line-height: 1.6;
      text-align: center;
    }
  }
  
  .feature-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20rpx;
    margin-bottom: 40rpx;
    
    .feature-item {
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10rpx);
      border-radius: 15rpx;
      padding: 30rpx;
      text-align: center;
      border: 1rpx solid rgba(255, 255, 255, 0.2);
      
      .feature-icon {
        display: block;
        font-size: 40rpx;
        margin-bottom: 10rpx;
      }
      
      .feature-text {
        display: block;
        font-size: 22rpx;
        color: #fff;
      }
    }
  }
  
  .theme-toggle {
    text-align: center;
    
    .theme-btn {
      background: rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(10rpx);
      border: 1rpx solid rgba(255, 255, 255, 0.3);
      color: #fff;
      padding: 20rpx 40rpx;
      border-radius: 50rpx;
      font-size: 28rpx;
      
      &:active {
        background: rgba(255, 255, 255, 0.3);
      }
    }
  }
}

/* 深色模式适配 */
.dark-theme {
  .index-container {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  }
}
</style>
